<div layout="row" layout-wrap>
    <div ng-if="!servers.length" class="zero-element">没有服务器<br /><span class="zero-element-link" ng-if="id === 1" ng-click="addServer()">点击这里添加</span></div>
    <div flex-xs="100" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="server in servers track by server.id" ng-show="showServer(server.name)">
        <md-card class="hover-mouse hover-flow" ng-click="id === 1 && toServerPage(server.id)" md-colors="{{serverColor(server)}}">
            <md-card-header>
                <md-card-header-text layout="row" layout-align="space-between center">
                    <div layout="column" flex="100">
                        <span class="md-title" layout="row" layout-align="space-between center">
                            <span>
                                {{server.name}}
                                <span ng-show="server.status === -1" style="color: #a33;">离线</span>
                                <span ng-show="server.status !== -1 && !server.isGfw" style="color: #3a3;">{{server.status}}</span>
                                <span ng-show="server.status !== -1 && server.isGfw" style="color: #a33;">{{server.status}}</span>
                            </span>
                            <span><span style="color: #999;">{{ online[server.id] }}</span></span>
                        </span>
                        <span class="md-subhead">{{server.host.split(':')[0]}}:{{server.port}}</span>
                    </div>
                </md-card-header-text>
            </md-card-header>
            <div layout="row" layout-align="center center" ng-if="serverChart.showChart" style="position: relative;">
                <div style="position: absolute; width: 100%; height: 100%; z-index: 1;">
                    <div ng-if="server.sumFlowOneHour" style="position: absolute; right: 4%; bottom: 28px; color: rgba(70, 70, 70, 0.75); background-color: rgba(225, 225, 225, 0.5);">
                        {{ server.sumFlowOneHour | flow }}
                    </div>
                </div>
                <div style="width: 95%; max-width: 500px;">
                    <canvas class="chart chart-line"
                        chart-data="server.chart.data"
                        chart-labels="chart.labels"
                        chart-series="chart.series"
                        chart-options="chart.options"
                        chart-dataset-override="chart.datasetOverride">
                    </canvas>
                </div>
            </div>
            <md-card-actions layout="row" layout-align="start center" ng-if="serverChart.showChart">
            </md-card-actions>
            <md-card-content layout="column" ng-if="serverChart.showFlow">
                <div layout="row" layout-align="space-between center">
                    <div translate>本日流量：</div>
                    <div>{{server.flow.today | flow}}</div>
                </div>
                <div layout="row" layout-align="space-between center">
                    <div translate>本周流量：</div>
                    <div>{{server.flow.week | flow}}</div>
                </div>
                <div layout="row" layout-align="space-between center">
                    <div translate>本月流量：</div>
                    <div>{{server.flow.month | flow}}</div>
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>
<div style="height: 100px;"></div>
